<template>
	<view class="appointment-container">
		<!-- 门店选择 -->
		<view class="store-selection">
			<view class="section-title">选择门店</view>
			<picker mode="selector" :range="stores" range-key="name" :value="selectedStoreIndex"
				@change="onStoreChange">
				<view class="store-picker">
					<text>{{stores[selectedStoreIndex].name}}</text>
					<text class="store-address">{{stores[selectedStoreIndex].address}}</text>
				</view>
			</picker>
		</view>

		<!-- 服务类型选择 -->
		<view class="service-types">
			<view class="section-title">选择服务类型</view>
			<view class="type-list">
				<view v-for="(type, index) in currentStoreServices" :key="index"
					:class="['type-item', selectedType === type.id ? 'selected' : '']"
					@tap="selectServiceType(type.id)">
					<text class="type-name">{{type.name}}</text>
					<text class="type-price">¥{{type.price}}</text>
					<text class="type-duration">预计{{type.duration}}分钟</text>
				</view>
			</view>
		</view>

		<!-- 预约时间选择 -->
		<view class="appointment-time">
			<view class="section-title">选择预约时间</view>
			<picker mode="date" :value="selectedDate" start="2024-01-01" end="2024-12-31" @change="onDateChange">
				<view class="picker-item">
					<text>日期：{{selectedDate}}</text>
				</view>
			</picker>
			<picker mode="time" :value="selectedTime" start="08:00" end="20:00" @change="onTimeChange">
				<view class="picker-item">
					<text>时间：{{selectedTime}}</text>
				</view>
			</picker>
		</view>

		<!-- 车辆信息 -->
		<view class="car-info">
			<view class="section-title">车辆信息</view>
			<input class="input-item" v-model="carNumber" placeholder="请输入车牌号" />
			<input class="input-item" v-model="carModel" placeholder="请输入车型" />
		</view>

		<!-- 备注信息 -->
		<view class="remarks">
			<view class="section-title">备注信息</view>
			<textarea class="remarks-input" v-model="remarks" placeholder="请输入特殊要求或备注信息" />
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @tap="submitAppointment">提交预约</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stores: [{
						id: 1,
						name: '中心门店',
						address: '市中心广场A座101',
						services: [{
								id: 1,
								name: '基础洗车',
								price: 30,
								duration: 30
							},
							{
								id: 2,
								name: '精洗套餐',
								price: 68,
								duration: 60
							},
							{
								id: 3,
								name: '豪华套餐',
								price: 128,
								duration: 90
							}
						]
					},
					{
						id: 2,
						name: '东区门店',
						address: '东区商业街88号',
						services: [{
								id: 1,
								name: '基础洗车',
								price: 35,
								duration: 30
							},
							{
								id: 2,
								name: '精洗套餐',
								price: 78,
								duration: 60
							},
							{
								id: 3,
								name: '豪华套餐',
								price: 138,
								duration: 90
							}
						]
					},
					{
						id: 3,
						name: '西区门店',
						address: '西区购物中心B1层',
						services: [{
								id: 1,
								name: '基础洗车',
								price: 32,
								duration: 30
							},
							{
								id: 2,
								name: '精洗套餐',
								price: 72,
								duration: 60
							},
							{
								id: 3,
								name: '豪华套餐',
								price: 132,
								duration: 90
							}
						]
					}
				],
				selectedStoreIndex: 0,
				selectedType: 1,
				selectedDate: '2024-03-20',
				selectedTime: '10:00',
				carNumber: '',
				carModel: '',
				remarks: ''
			}
		},
		computed: {
			currentStoreServices() {
				return this.stores[this.selectedStoreIndex].services
			}
		},
		methods: {
			onStoreChange(e) {
				this.selectedStoreIndex = e.detail.value
				this.selectedType = this.currentStoreServices[0].id
			},
			selectServiceType(typeId) {
				this.selectedType = typeId
			},
			onDateChange(e) {
				this.selectedDate = e.detail.value
			},
			onTimeChange(e) {
				this.selectedTime = e.detail.value
			},
			submitAppointment() {
				// 表单验证
				if (!this.carNumber) {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					})
					return
				}

				// 构建预约数据
				const appointmentData = {
					storeId: this.stores[this.selectedStoreIndex].id,
					storeName: this.stores[this.selectedStoreIndex].name,
					serviceType: this.selectedType,
					appointmentDate: this.selectedDate,
					appointmentTime: this.selectedTime,
					carNumber: this.carNumber,
					carModel: this.carModel,
					remarks: this.remarks
				}

				// TODO: 调用预约接口
				console.log('预约数据：', appointmentData)

				uni.showToast({
					title: '预约成功',
					icon: 'success'
				})
			}
		}
	}
</script>

<style>
	.appointment-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		text-align: center;
		padding: 30rpx 0;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.section-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.store-selection {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.store-picker {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.store-address {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		display: block;
	}

	.service-types {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.type-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.type-item {
		flex: 1;
		min-width: 200rpx;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		text-align: center;
	}

	.type-item.selected {
		background-color: #007AFF;
		color: #fff;
	}

	.type-name {
		font-size: 28rpx;
		display: block;
	}

	.type-price {
		font-size: 24rpx;
		color: #ff6b6b;
		margin-top: 10rpx;
		display: block;
	}

	.type-duration {
		font-size: 22rpx;
		color: #999;
		margin-top: 6rpx;
		display: block;
	}

	.appointment-time {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.picker-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.car-info {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.input-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.remarks {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.remarks-input {
		width: 100%;
		height: 200rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f8f8f8;
		border-radius: 8rpx;
	}

	.submit-section {
		padding: 40rpx 0;
	}

	.submit-btn {
		background-color: #007AFF;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
	}
</style>